<template>
    <div id="message">
        <div class="bar"><a href="javascript:window.history.go(-1);"><i class="fa fa-chevron-left"></i></a>消息中心</div>
        <article>
            <mt-loadmore bottomLoadingText="" topDropText="Loading..." topLoadingText="" topPullText="" :top-method="loadTop"  :bottom-method="loadBottom"
                     :bottom-all-loaded="bottomAllLoaded" ref="loadmore" @bottom-status-change="handleBottomChange">
                <section class="message" v-for="message in messageList">
                    <strong class="time">{{ message.created_at }}</strong>
                    <div class="message-box">
                        <router-link v-if="message.component != 'product'"
                                     v-bind:to="(message.component != 'activity' ? '/community/' : '/active/') + message.component_object_id">
                            <h2>{{message.title}}
                                <small>{{ message.created_at }}</small>
                            </h2>
                            <img v-bind:src="message.cover">
                            <p>{{message.content}}</p>
                            <span>阅读全文<i class="fa fa-angle-right"></i></span>
                        </router-link>
                        <a v-bind:href="message.link" target="_blank" v-else>
                            <h2>{{message.title}}
                                <small>{{ message.created_at }}</small>
                            </h2>
                            <img v-bind:src="message.cover">
                            <p>{{message.content}}</p>
                            <span>阅读全文<i class="fa fa-angle-right"></i></span>
                        </a>
                    </div>

                </section>
                <div slot="bottom" class="mint-loadmore-bottom">
				<span v-show="bottomStatus!=='loading'&&!bottomAllLoaded">Loading...</span>
				<span v-show="bottomAllLoaded==true">没有更多内容</span>
			</div>
            </mt-loadmore>
        </article>
    </div>
</template>

<script type="text/javascript">
	import {
		Loadmore
	} from 'mint-ui';
	export default {
		data() {
				return {
					messageList: [],
					article_page: {},
					bottomAllLoaded: false
				}
			},
			mounted: function() {
				this.getMessages(0);

			},
			methods: {
				getMessages(page) {
					this.$http.get(this.GLOBAL.serverAddr + '/message' + '?page=' + page, {
						headers: {
							'Authorization': this.GLOBAL.authorization
						},
						emulateJSON: true
					}).then(function(response) {
						this.article_page.cur_page = response.data.page.cur_page;
						this.article_page.count_page = response.data.page.count_page;
						this.article_page.page_size = response.data.page.page_size;
						var list = response.data.data;
						for (var i in list) {
							list[i].created_at = this.GLOBAL.timeTrans(list[i].created_at);
							this.messageList.push(list[i]);
						}
					}, function(response) {
						// 这里是处理错误的回调
						console.log(response)
					});
				},
				loadBottom() {
                if (this.article_page.cur_page < this.article_page.count_page) {
                    this.getArticles(this.article_page.cur_page + 1);
                    
                } else {
                    //最后一页,解除加载触发事件
                    this.bottomAllLoaded = true;
                  
                    console.log("no more");

                }
                this.$refs.loadmore.onBottomLoaded();
            },
            loadTop() {
            	this.getArticles(0);
            	this.$refs.loadmore.onTopLoaded();
            },
            handleBottomChange(status){
        		this.bottomStatus = status;
        		console.log(this.bottomStatus);
        	}
			},
			components: {
				'mt-loadmore': Loadmore
			}
	}
</script>

<style>
	@import "../assets/css/message.css"
</style>